import React from 'react'
import { error, InputList, Modal, info, success, Link, Table, TitleBar } from '../../ui-components'
import { connect } from 'react-redux'
import moment from 'moment'
import util from '../../util'
import style from './style.employ-management'
import { map as tableMap } from '../../ui-components/table'
import { u } from '../../actions/util'

export 
const getTypeName = statusType => statusType == 1? '转正': statusType == 2? '离职': ''

export default
@connect(({ employManagement, app }) => ({ app, employManagement }))
class EmployManagement extends React.Component {

  pageSize=30
  pageNumber=1
  selectedUser=null

  state = {
    create: false
  }

  create() {
    if (util.isNull(this.selectedUser)) return error('请输入员工!')
    this.props.router.push(`/hr/reorg/employ-managements/${this.props.params.statusType}/${this.selectedUser.userId}`)
  }

  handleSelectCreateUser(user) {
    this.selectedUser = user
  }

  requestCreateEmployManagement() {
    util.dialog.call(this, 'create')
  }

  cancelCreate() {
    util.dialog.call(this, 'create')
    this.selectedUser = null
  }

  fetchList(props) {
    props = props || this.props
    const pageNumber = props.location.query.pageNumber || this.pageNumber
    info('读取中..', true)
    this.props.fetchEmployManagement({
      pageNumber,
      pageSize: this.pageSize,
      statusType: props.params.statusType
    }, () => {
      info()
    })
  }

  handlePageChage(_pageNumber) {
    const { pageNumber, ...others } = this.props.location.query
  this.props.router.push(`/hr/reorg/employ-managements/${this.props.params.statusType}?pageNumber=${_pageNumber}&${util.body(others)}`)
  }

  componentDidMount() {
    this.fetchList()
  }

  componentWillUnmount() {
    this.props.resetEmployManagement()
  }

  componentWillReceiveProps(props) {
    if (props.params.statusType != this.props.params.statusType) {
      this.fetchList(props)
    }
  }

  render() {
    const { data} = this.props.employManagement
    const { totalNumber, statusUpdateResponseVOs } = data || {}
    const { statusType } = this.props.params
    const typeName = getTypeName(statusType)
    const tableConfig = {
      pagin: typeof totalNumber === 'number' && {
        pageSize: this.pageSize,
        pageNumber: this.props.location.query.pageNumber || this.pageNumber,
        totalNumber,
        onChange: ::this.handlePageChage,
        fetch: ::this.fetchList
      },
      data: statusUpdateResponseVOs,
      model: {
        fullName: `${typeName}成员`,
        createdTime: '发起时间',
        updateType: statusType == 2? '离职类型': '转正类型',
        updateDate: `${typeName}时间`,
        others: ''
      },
      config: {},
      map: {
        fullName: (_, item) => {
          if (item.userCoreUserProfileVO) {
            return tableMap.fullName.call(null, item.userCoreUserProfileVO.fullName, item.userCoreUserProfileVO)
          } else {
            return tableMap.fullName(null, null)
          }
        },
        createdTime: v => util.time(v, '.'),
        updateDate: v => v > 0 ? util.time(v, '.') : '已撤销',
        others: (_, v) => v.userCoreUserProfileVO? <Link label="查看" data-role="table-hover" to={`#/hr/reorg/employ-managements-detail/${statusType}/${v.statusUpdateId}`}/>: null
      }
    }
    return (
      <div>
        <TitleBar
          label={typeName? `${typeName}列表`: ''}
          actions={[
            {
              label: `发起新${typeName}`,
              handler: ::this.requestCreateEmployManagement
            }
          ]}
        />
        <Table
          {...tableConfig}
        />
        <Modal
          active={this.state.create}
          onRequestClose={::this.cancelCreate}
          actions={['cancel', ::this.create ]}
          title={`发起新${typeName}`}
        >
          <div style={{width:'400px'}}>
            <InputList
              autoFocus
              label="员工姓名"
              fetch={value => this.props.fetchAtList({
                keyword: value,
                type: statusType == 1? 3: 2
              })}
              width={264}
              clear={this.props.clearAtList}
              onSelect={::this.handleSelectCreateUser}
              list={this.props.app.atList}
              excludeList={[{userId: u.userId}]}
            />
          </div>
        </Modal>
      </div>
    )
  }
}
